<template>
	<view>
		<view class="header">
			<view class="header-1">
			<!-- 	<image src="../../static/@1/caipusousuo_slices/zuocequyu .png" style="height: 80rpx;width: 60rpx;">
				</image> -->
				<text class="text-1">菜谱搜索</text>
				<!-- <image src="../../static/@1/caipusousuo_slices/youcequyu.png" mode=""
					style="height: 88rpx;width: 200rpx;"></image> -->
			</view>
			<view class="varClass">
				<view class="myimg">
					<view class="myimg-1">
						
						<image :src="require('@/static/@1/caipusousuo_slices/mengbanzu 2.png')"></image>
						<input type="text" class="uni-item" placeholder="甜点">
					</view>
				</view>
				<view class="myimg-2">
					搜索
				</view>
			</view>
		</view>
		<view class="main">
			<view class="video-cook">
				<view class="video-cook-1">精品名厨-会员专享</view>
				<image src="../../static/@1/mengbanzu282.png"></image>
			</view>
                   <!--  轮播菜谱 -->
					<view>
						<scroll-view scroll-x="true" @scroll="scroll" class="scroll-view_H">
								<view class="demo1" v-for="item in goodCook" :key="item._id" style="margin-right: 20rpx;">
									<image :src="item.coverpic" style="border-radius: 10rpx;"></image>
									<view class="lai1" style="font-size: 26rpx;">{{item.name}}</view>
									<view class="lai">
										<text class="text1">{{item.collections}}</text>
										<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
										<text class="text1">{{item.pageview}}</text>
										<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
									</view>
								</view>
						</scroll-view>
				</view>
			<!-- 	内容模块 -->
			<view>
				<view class="main-1" v-for="item in searchCook" :key="item._id" @click="listClick(item._id)">
					<view class="main-1-1">
						<image :src="item.coverpic"></image>
					</view>
					<view class="main-1-2" style="margin-left: 18rpx;">
						<view class="first-item" style="margin-top: 8rpx;margin-bottom: 20rpx;">{{item.name}}</view>
						<view class="two-item" style="margin-bottom: 64rpx;">{{item.classtips | listFilter}}</view>
						<view class="lai">
							<text class="text1">{{item.pageview}}</text>
							<image src="../../static/@1/midou _slices/liulam .png" class="bian"></image>
							<text class="text1">{{item.collections}}</text>
							<image src="../../static/@1/caipusousuo_slices/mengbanzu279.png" class="enen"></image>
						</view>
					</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import {getGoodCookerApi,getMiddleCookApi,getSpeDataApi} from "@/apis/search.js"
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				goodCook:[],
				searchCook:[],
				params:{
					method:"POST",
					data:{
						pageSize:12,
						currentPage:1
					}
				},
				postId:""
			};
		},
		created() {
			this.getGoodCooker();
			this.getMiddleCook();
		},
		
		methods: {
			listClick(par){
				// console.log(par)
				
				this.postId=par
				uni.navigateTo({
					
				    url: `/pages/jumpDetails/jumpDetails?postId=${this.postId}`
				})
			},
			getSpeData(){
				getSpeDataApi().then((res)=>{
					// console.log('hao',res)
				})
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			getGoodCooker(){
				getGoodCookerApi().then((res)=>{
					this.goodCook=res
				})
			},
			getMiddleCook(){
				getMiddleCookApi(this.params).then((res)=>{
					console.log('niuniu',res.menus[0]._id)
						this.searchCook=res.menus;
				})
			}
		
		}
	}
</script>

<style lang="scss">
	
	.demo1{
		
		width: 320rpx;
		height: 320rpx;
		display: inline-block;
		image{
			width: 312rpx;
			height: 200rpx;
		}
		.lai1{
			margin-bottom: 14rpx;
		}
		.lai{
			font-size: 24rpx;
			margin-bottom: 18rpx;
			.bian{
				margin-left: 10rpx;
				margin-right: 64rpx;
			}
			.text1{
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
			}
			.enen{
				margin-left: 10rpx;
			}
			image{
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
    
	.scroll-y {
		height: 3000rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.header {
		height: 272rpx;
		width: 100%;
		overflow: hidden;
		background-image: url("@/static/@1/caipusousuo_slices/ditu .png");

		.header-1 {
			margin-top: 102rpx;
			color: white;
			font-size: 36rpx;
			font-weight: bolder;
			display: flex;
			justify-content: center;
			align-items: center;

			.small-img {
				height: 40rpx;
				width: 30rpx;
			}

			.text-1 {
				height: 60rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 60rpx;
			}
		}

		.varClass {
			display: flex;
			margin-left: 98rpx;
			width: 750rpx;

			.myimg {
				height: 60rpx;
				width: 540rpx;
				border-radius: 30rpx;
				background-color: white;
				display: flex;
				align-items: center;

				.myimg-1 {
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					image {
						width: 20rpx;
						height: 20rpx;
						margin-left: 20rpx;
						margin-right: 14rpx;
					}

					.uni-item {
						height: 60rpx;
						width: 260rpx;
					}
				}
			}

			.myimg-2 {
				font-size: 32rpx;
				height: 60rpx;
				width: 70rpx;
				line-height: 60rpx;
				text-align: center;
				margin-left: 14rpx;
				color: white;
			}
		}
	}

	.main {
		padding: 26rpx 0 0 32rpx;
		.main-1{
			height: 210rpx;
			// border: 1px solid red;
			display: flex;
			.main-1-1{
				height: 200rpx;
				width: 314rpx;
				// border: 1px solid red;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.main-1-2{
				height: 200rpx;
				width: 314rpx;
				// border: 1px solid red;
				.first-item{
					font-size: 30rpx;
				}
				.two-item{
					font-size: 24rpx;
				}
				.lai{
					font-size: 24rpx;
					margin-bottom: 18rpx;
					.bian{
						margin-left: 10rpx;
						margin-right: 64rpx;
					}
					.text1{
						height: 30rpx;
						line-height: 30rpx;
						text-align: center;
					}
					.enen{
						margin-left: 10rpx;
					}
					image{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
	}

	.video-cook {
		display: flex;
		margin-bottom: 16rpx;

		.video-cook-1 {
			font-size: 32rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 49rpx;
		}
	}

	.swiper {
		width: 1000%;
		// height: 329rpx;
		display: flex;
		overflow: hidden;

		.swiper-1 {
			width: 318rpx;
			height: 324rpx;
			// border: 1px solid red;
			margin-right: 20rpx;
		}
	}
</style>
